<script setup lang="ts">
import { ElPagination } from "element-plus";
import { onMounted, ref } from "vue";

const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

const prop = defineProps({
  page: {
    type: Object,
    default: null,
  },
  // 其他高度,屏幕高度减去其它高度得到表格高度
  otherHeight: {
    type: Number,
    default: 250,
  },
});

// 初始化数据
const initPage = (otherHeight: number) => {
  const height = document.body.clientHeight - otherHeight;
  page.value.pageSize = Math.floor(height / 48);
};

onMounted(() => {
  initPage(prop.otherHeight);
  if (prop.page) {
    page.value = { ...page.value, ...prop.page };
  }
});

// 分页改变
const currentChange = (value: number) => {
  console.log(value);
  // page.value.currentPage = value;
};

defineExpose({
  currentChange,
});
</script>

<template>
  <div class="page">
    <el-pagination
      @current-change="currentChange"
      v-model="page.currentPage"
      layout="prev, pager, next"
      :default-page-size="page.pageSize"
      :total="page.total"
      :hide-on-single-page="true"
    />
  </div>
</template>
<style scoped lang="less"></style>
